import React from 'react';
import {
    Menu, Dropdown, Tree, Form, Row, Col, Input, Button, Modal, Icon, DatePicker, Select, Table, Tag, message, TreeSelect, Popconfirm, Tooltip, Checkbox
} from 'antd';
import { connect } from 'dva';
import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
import VideoButton from './VideoButton';
import VideoButtonAll from './VideoButtonAll';
import AddModal from './AddModal';
import HTML5Backend from 'react-dnd-html5-backend';
import Authentication from '../../../components/authentication';
import update from 'immutability-helper';
import { upDownVideo, auditVideo, sortTable, addInformation, getConfig, changeStateTime } from '../../../services/fetch';
import { checkPrivilege } from '../../../utils/request';
import './Video-mon.scss';
import CommentModal from '../Comment/CommentModal';
import moment from 'moment';
import { UrlConfig } from '../../../services/fetch';
import { timingSafeEqual } from 'crypto';
import Qrcode from 'qrcode.react'
import StyleDropdown from './components/StyleDropdown';
import { getModalList } from '../../../services/typeFetch';
import produce from "immer";

const { confirm } = Modal;
const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Option } = Select;

let count = 0;  //单双击计数
@connect(({ video }) => ({
    video
}))
@Form.create()
class Video extends React.PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            isTable: true,
            loading: false,
            selectedKeys: [],
            page_size: 10,

            isAggregation: false,
            permission:[]
        }
        this.resetTree = this.resetTree.bind(this)
    }

    componentDidMount() {
        const { search } = window.location
        const paramsString = search.substring(1)
        const searchParams = new URLSearchParams(paramsString)
        if (searchParams.get('type')) {
            const type = searchParams.get('type')
            // console.log(type)
            if (type === 'aggregation') {
                this.setState({
                    isAggregation: true
                }, () => {
                    this.init()
                })
                window.localStorage.setItem('aggregationStatus', '1')
            }
        } else {
            this.init()
        }

        this.props.dispatch({
            type: 'theme/setParams', data: {}
        })
        //通过监听storage  实现跨页面通信，当保存和编辑时，更新列表页
        window.addEventListener('storage', (e) => {
            if (e.key == 'submit' || e.key == 'edit') {
                this.props.dispatch({
                    type: 'video/updatePutTableName', payload: {
                        initTableName: localStorage.getItem('treeSelectedValue'),
                        selectedKeys: [localStorage.getItem('treeSelectedKeys')]
                    }
                });

                this.props.dispatch({
                    type: 'video/getTableList', payload: {
                        dataAugment: {
                            index: this.props.video.dataAugment ? this.props.video.dataAugment.index : 1,
                            plate_id: localStorage.getItem('treeSelectedValue') ? localStorage.getItem('treeSelectedValue') : this.props.video.dataAugment.plate_id,
                            status: this.state.isAggregation ? '1' : undefined
                        }
                    }
                })
            }
            // } else if (e.key == 'edit') {
            //   this.props.dispatch({
            //     type: 'video/getTableList', payload: {
            //       dataAugment: this.props.video.dataAugment
            //     }
            //   })
            // }
        });
        this.setState({
            permission: JSON.parse(localStorage.getItem('permissionzx')) || []
        })
    }

    init = () => {
        //获取分类
        this.props.dispatch({ type: 'video/classList' })
        //获取tree list
        this.props.dispatch({
            type: 'video/getTreeList', callback: (res, initPlateId) => {

                if (this.state.isAggregation) {
                    let data = {
                        index: this.props.video.index,
                        plate_id: initPlateId,
                        page_size: this.state.page_size,
                        status: '1'
                    }
                    this.props.dispatch({
                        type: 'video/getTableList', payload: {
                            dataAugment: data
                        }
                    })
                } else {
                    let data = {
                        index: this.props.video.index,
                        plate_id: initPlateId,
                        page_size: this.state.page_size
                    }
                    this.props.dispatch({
                        type: 'video/getTableList', payload: {
                            dataAugment: data
                        }
                    })
                }

            }
        });
    }


    onSelect = (selectedKeys, info) => {
    }
    onChangeSwitch = (e) => {
        this.setState({
            isTable: true
        })
    }
    onChangeSwitchs = () => {
        this.setState({
            isTable: false
        })
    }

    hideCallback = (t) => {
        this.child = t;
    }

    handleOk = () => {
        const { dispatch } = this.props;

        dispatch({
            type: 'video/hideModal'
        })
    }

    handleCancel = () => {
        const { dispatch } = this.props;
        this.child.handleCancel();
        dispatch({
            type: 'video/hideModal'
        })
    }
    onRef = (eg) => {
        this.treeChild = eg
    }
    resetTree = () => {
        this.treeChild && this.treeChild.handleResets()
    }
    render() {
        // {this.props.video.selectedKeys}
        return (
            <section id='video' style={{ width: '100%', height: '100%', overflow: 'auto' }}>
                <header>
                    资讯管理
                </header>
                <div className='content'>
                    <div className='leftTree_old mon_tree' style={{height:'800px'}}>
                        {/* <h4>版面管理</h4> */}
                        <h4>ᠨᠢᠭᠤᠷ᠎ᠤᠨ ᠬᠠᠮᠢᠶᠠᠷᠤᠯᠲᠠ</h4>
                        {/* <VideoButtonAll /> */}
                        <TreeLeft thisSerach={this.resetTree} />
                    </div>

                    {!this.props.video.plateSelectProps.is_other && !this.props.video.plateSelectProps.url && this.props.video.plateSelectProps.template_style !== 'recommend_matrix' ?
                        <div className='rightContent'>
                            <WrappedAdvancedSearchForm onRef={this.onRef} />
                            {/* <div style={{ position: 'absolute', top: '90px', right: '30px', fontSize: '25px', cursor: 'pointer' }}>
              <Icon type="table" theme="outlined" onClick={this.onChangeSwitch} style={this.state.isTable ? { marginRight: 5, fontSize: '30px' } : { marginRight: 5 }} />
              <Icon type="appstore" theme="outlined" onClick={this.onChangeSwitchs} style={this.state.isTable ? {} : { fontSize: '30px' }} />
            </div> */}
                            {/* {this.state.isTable ? <TableList /> : <CardList />} */}
                            <TableList />
                        </div>
                        : <div className='rightContent' style={{ textAlign: 'center', paddingTop: '300px', fontSize: '26px' }}>
                            {this.props.video.plateSelectProps.is_other || this.props.video.plateSelectProps.template_style === 'recommend_matrix' ? '该版面为其他组件，版面内容请在对应组件中进行管理' : '该版面为外链版面，不能添加内容'}
                        </div>}
                </div>
                <Modal
                    title="新建"
                    width={800}
                    visible={this.props.video.isShowModal}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    footer={null}
                >
                    <AddModal callback={this.hideCallback} />
                </Modal>
            </section>
        )
    }
}

export default Video;

/**
 * 搜索组件
 */
@connect(({ video }) => ({
    video,
}))
class AdvancedSearchForm extends React.PureComponent {
    state = {
        expand: false,
        isAggregation: false,
        showMore: false,
    };
    componentDidMount() {
        this.props.onRef(this)
        const { search } = window.location
        const paramsString = search.substring(1)
        const searchParams = new URLSearchParams(paramsString)
        if (searchParams.get('type')) {
            const type = searchParams.get('type')
            // console.log(type)
            if (type === 'aggregation') {
                this.props.form.setFieldsValue({
                    status: '1'
                })
                this.setState({
                    isAggregation: true
                })
            }
        }
    }
    /**
     * 搜索
     */
    handleSearch = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            // console.log({ values });
            let data = {
                index: 1,
                page_size: this.state.page_size,
                plate_id: this.props.video.initTableName,
                status: values.status ? values.status : '',
                state: values.state ? values.state : '',
                class_id: values.class_id ? values.class_id : '',
                key: values.key ? values.key : '',
                start: values.time ? values.time[0] ? values.time[0].format('YYYY-MM-DD') + ' 00:00:00' : '' : '',
                end: values.time ? values.time[1] ? values.time[1].format('YYYY-MM-DD') + ' 23:59:59' : '' : '',
                start_state: values.releaseTime ? values.releaseTime[0] ? values.releaseTime[0].format('YYYY-MM-DD') + ' 00:00:00' : '' : '',
                end_state: values.releaseTime ? values.releaseTime[1] ? values.releaseTime[1].format('YYYY-MM-DD') + ' 23:59:59' : '' : '',
                editor: values.editor,
                author: values.autor,
                check_user: values.auditor,
                create_user: values.creater,
            }
            this.props.dispatch({
                type: 'video/getTableList', payload: {
                    dataAugment: data
                }
            })
        });
    }
    /**
     * 外部调用清除
     */
    handleResets = () => {
        this.props.form.resetFields();
    }
    /**
     * 清除
     */
    handleReset = () => {
        this.props.form.resetFields();
        let data = {
            index: this.props.video.index,
            plate_id: this.props.video.initTableName,
            page_size: this.state.page_size
        }
        this.props.dispatch({
            type: 'video/getTableList', payload: {
                dataAugment: data
            }
        })
    }
    changeStatus = (value) => {
        if (value == null) {
            value = ''
        }
        window.localStorage.setItem('aggregationStatus', value)
    }

    setName = (datas) => { //遍历树  获取id数组
        datas.forEach((item, index) => {
            item.key = item.class_id
            item.title = item.class_name
            item.value = item.class_id
            if (item.children && item.children !== []) {
                this.setName(item.children);
            }
        })
    }

    onRef = (ref) => {
        this.child = ref
    }

    render() {
        const { dataSource } = this.props.video
        const videoData = dataSource.list ? dataSource.list : []

        const { getFieldDecorator } = this.props.form;
        let treeData = [...this.props.video.classList]

        let obj = {
            class_id: '',
            class_name: '全部'
        }
        treeData.unshift(obj)
        this.setName(treeData)
        return (
            <Row gutter={12}>
                <Col span={12}>
                    <div style={{padding: '10px'}}>
                        <VideoButton videoData={videoData} onRef={this.onRef} />
                    </div>
                </Col>

                <Col span={12}>
                    <Form
                        className="ant-advanced-search-form mon_form"
                        onSubmit={this.handleSearch}
                    >
                        <Row gutter={24} >
                            <Col span={2} >
                                <FormItem label='ᠵᠠᠩᠭᠢᠯᠠᠭ᠎ᠠ᠎ᠶᠢᠨ ᠦᠭᠡ᠎ᠪᠡᠷ ᠬᠠᠢᠬᠤ : '>
                                    {getFieldDecorator('key')(
                                        <Input />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={2} >
                                <FormItem label='ᠨᠡᠢᠲᠡᠯᠡᠭᠰᠡᠨ ᠴᠠᠭ : '>
                                    {getFieldDecorator('releaseTime')(
                                        <RangePicker placeholder={['ᠡᠬᠢᠯᠡᠬᠦ ᠴᠠᠭ', 'ᠲᠡᠭᠦᠰᠬᠦ ᠴᠠᠭ']} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={2} >
                                <FormItem label='ᠬᠢᠨᠠᠭᠰᠠᠨ ᠪᠠᠢᠳᠠᠯ : '>
                                    {getFieldDecorator('status', { initialValue: this.state.isAggregation ? '1' : '' })(
                                        <Select className="mon_select" onSelect={this.changeStatus}>
                                            <Option value={null}>ᠪᠦᠭᠦ</Option>
                                            <Option value="0">ᠡᠬᠡ ᠨᠣᠣᠷᠠᠭ</Option>
                                            <Option value="1">ᠬᠢᠨᠠᠬᠤ ᠪᠡᠷ ᠪᠠᠢᠭ᠎ᠠ</Option>
                                            <Option value="2">ᠬᠢᠨᠠᠨ ᠵᠥᠪᠰᠢᠶᠡᠷᠡᠪᠡ</Option>
                                            <Option value="3">ᠬᠢᠨᠠᠨ ᠵᠥᠪᠰᠢᠶᠡᠷᠡᠭᠰᠡᠨ ᠦᠭᠡᠢ</Option>
                                        </Select> 
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={2} >
                                <FormItem label='ᠨᠡᠢᠲᠡᠯᠡᠭᠰᠡᠨ ᠪᠠᠢᠳᠠᠯ : '>
                                    {getFieldDecorator('state')(
                                        <Select >
                                            <Option value={null}>ᠪᠦᠭᠦ</Option>
                                            <Option value="0">ᠪᠠᠭᠤᠯᠭᠠᠪᠠ</Option>
                                            <Option value="1">ᠨᠡᠢᠲᠡᠯᠡᠪᠡ</Option>
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={2} >
                                <FormItem label='ᠪᠠᠢᠭᠤᠯᠤᠭᠴᠢ : '>
                                    {getFieldDecorator('creater')(
                                        <Input />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={2} >
                                <FormItem label='ᠪᠠᠢᠭᠤᠯᠤᠭᠰᠠᠨ ᠴᠠᠭ : '>
                                    {getFieldDecorator('time')(
                                        <RangePicker placeholder={['ᠡᠬᠢᠯᠡᠬᠦ ᠴᠠᠭ', 'ᠲᠡᠭᠦᠰᠬᠦ ᠴᠠᠭ']} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={2} >
                                <FormItem label='ᠠᠩᠭᠢᠯᠠᠯ : '>
                                    {getFieldDecorator('class_id')(
                                        // <Select >
                                        //     <Option value={null}>全部</Option>
                                        //     {
                                        //         this.props.video.classList.map((item, index) => {
                                        //             return <Option key={index} value={item.class_id}>{item.class_name}</Option>
                                        //         })
                                        //     }
                                        // </Select>
                                        <TreeSelect
                                            dropdownClassName='mon_select_tree'
                                            dropdownStyle={{ maxHeight: 400 }}
                                            dropdownMatchSelectWidth
                                            placeholder=""
                                            allowClear
                                            treeData={treeData}
                                        >
                                        </TreeSelect>
                                        
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={2} >
                                <FormItem label='ᠬᠢᠨᠠᠬᠴᠢ : '>
                                    {getFieldDecorator('auditor')(
                                        <Input />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={2} >
                                <FormItem label='ᠵᠣᠬᠢᠶᠠᠭᠴᠢ : '>
                                    {getFieldDecorator('autor')(
                                        <Input />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={2} >
                                <FormItem label='ᠨᠠᠢᠷᠠᠭᠤᠯᠤᠭᠴᠢ : '>
                                    {getFieldDecorator('editor')(
                                        <Input />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={2} style={{ display: 'flex' }}>
                                <Button className='mon_btn' type="primary" htmlType="submit">ᠬᠠᠢᠬᠤ</Button>
                                <Button className='mon_btn' style={{ marginLeft: 8 }} onClick={this.handleReset}>ᠠᠷᠢᠯᠭᠠᠬᠤ</Button>
                            </Col>
                            {/* <Col span={2} >
                                <Button onClick={() => {
                                    this.setState({ showMore: !this.state.showMore })
                                }} type="link" icon={this.state.showMore ? 'up' : 'down'}>{this.state.showMore ? '收起' : '展开'}</Button>
                            </Col> */}
                        </Row>
                        {/* <Row gutter={24} style={{ display: this.state.showMore ? 'block' : 'none' }} >
                            
                        </Row> */}
                    </Form>
                </Col>
            </Row>
           
        );
    }
}

const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm);


/**
 * 树形组件
 */
@connect(({ video }) => ({
    video,
}))
class TreeLeft extends React.PureComponent {
    state = {
        selectedKeys: [],
        isAggregation: false
    };
    componentDidMount() {
        const { search } = window.location
        const paramsString = search.substring(1)
        const searchParams = new URLSearchParams(paramsString)
        if (searchParams.get('type')) {
            const type = searchParams.get('type')
            // console.log(type)
            if (type === 'aggregation') {
                this.setState({
                    isAggregation: true
                })
            }
        }
    }
    onDrop = (info) => {
        if (info.dragNodesKeys[0] === '000000all') {
            return message.error('不能拖动“全部”节点')
        }
        const dropKey = info.node.props.eventKey;
        const dragKey = info.dragNode.props.eventKey;
        const dropPos = info.node.props.pos.split('-');
        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
        const loop = (data, key, callback) => {
            data.forEach((item, index, arr) => {
                if (item.key === key) {
                    return callback(item, index, arr);
                }
                if (item.children) {
                    return loop(item.children, key, callback);
                }
            });
        };
        let data = JSON.parse(JSON.stringify(this.props.video.treeList))

        let dragObj;
        let arr1 = dropKey.split('-')
        let arr2 = dragKey.split('-')
        if (arr1.length === arr2.length) {
            if (info.dropToGap) {
                loop(data, dragKey, (item, index, arr) => {
                    arr.splice(index, 1);
                    dragObj = item;
                });
                let ar;
                let i;
                loop(data, dropKey, (item, index, arr) => {
                    ar = arr;
                    i = index;
                });
                if (dropPosition === -1) {
                    ar.splice(i, 0, dragObj);
                } else {
                    ar.splice(i + 1, 0, dragObj);
                }
            } else {
                message.error('不能拖动到第二层级孩子节点')
            }
        } else {
            message.error('不能跨层级拖动')
        }
        this.props.dispatch({
            type: 'video/backTreeList', payload: {
                dataAugment: data
            }
        });

    }
    /**
     * plate_id  修改
     * table list  数据变换
     */
    changeTableName = (selectedKeys, e) => {
        localStorage.setItem('aggregationStatus', '1')
        if (!e.selectedNodes[0]) {
            return false;
        }
        //清楚表格选中状态
        this.props.dispatch({
            type: 'video/setSelectedPlateIds',
            data: {
                ids: [],
                list: []
            }
        })
        // console.log(1111,e.selectedNodes[0].props);

        this.props.dispatch({ type: 'video/updateMoreDeal', data: [] });
        this.props.dispatch({ type: 'video/updateSelectProps', data: e.selectedNodes[0].props });
        localStorage.setItem('treeSelectedKeys', selectedKeys)
        localStorage.setItem('treeSelectedValue', e.selectedNodes[0].props.plate_id)
        //禁止 服务新建  发布
        window.PubSub.publish('stopNewAdd', e.selectedNodes[0].props.plate_id)
        //重置 搜索
        this.props.thisSerach()
        if (selectedKeys.length == 0) {
            return false;
        }
        let keys = selectedKeys.length > 0 ? selectedKeys : ['0']
        let keyArr = keys[0].split('-')
        let data = this.props.video.treeList
        let plate_id = ''
        // if (keyArr.length === 1) {  //父类
        //   this.props.dispatch({
        //     type: 'video/updateTableName', payload: {
        //       initTableName: e.selectedNodes[0].props.plate_id,
        //       selectedKeys: selectedKeys
        //     }
        //   });
        //   plate_id = e.selectedNodes[0].props.plate_id
        // }
        // if (keyArr.length === 2) {   //子类
        //   this.props.dispatch({
        //     type: 'video/updateTableName', payload: {
        //       initTableName: data[Number(keyArr[0])].children[Number(keyArr[1])].plate_id,
        //       selectedKeys: selectedKeys
        //     }
        //   });
        //   plate_id = data[Number(keyArr[0])].children[Number(keyArr[1])].plate_id
        // }

        this.props.dispatch({
            type: 'video/updatePutTableName', payload: {
                initTableName: e.selectedNodes[0].props.plate_id,
                selectedKeys: selectedKeys
            }
        });
        plate_id = e.selectedNodes[0].props.plate_id


        let datas = {
            index: 1,
            plate_id: plate_id,
            page_size: this.props.video.dataAugment.page_size,
            status: this.state.isAggregation ? '1' : undefined
        }

        this.props.dispatch({
            type: 'video/getTableList', payload: {
                dataAugment: datas
            }
        })
        this.props.dispatch({ type: 'video/updateIndex', data: 1 })

    }
    // /**
    //  * 返回数据处理
    //  */
    // changeData=(treeListData)=>{
    //   const data = []
    //   treeListData.map((item, index) => {
    //     let obj = {
    //       key: String(index),
    //       plate_id: item.plate_id,
    //       title: item.plate_name,
    //       plate_id: item.plate_id,
    //       children: item.children ? item.children : ''
    //     }
    //     if (item.children) {
    //       item.children.map((i, ins) => {
    //         let obj2 = {
    //           key: String(index) + '-' + ins,
    //           plate_id: i.plate_id,
    //           title: i.plate_name,
    //           plate_id: i.plate_id
    //         }
    //         item.children[ins] = obj2
    //       })
    //     }
    //     data[index] = obj
    //   })
    //   return data
    // }


    onExpand = (expandedKeys) => {
        this.props.dispatch({ type: 'video/expandedKeys', data: expandedKeys });
    }

    render() {
        // const treeList = [...this.props.video.treeList]
        let quanxian = this.props.video.loginModal.privilege_list ? this.props.video.loginModal.privilege_list : [];
        const treeList = JSON.parse(JSON.stringify(this.props.video.treeList))
        const loop = (datas) => {
            return datas.map((item) => {
                if (item.children && item.children.length) {
                    return <TreeNode key={item.key} title={item.title} plate_id={item.plate_id} url={item.url} is_other={item.is_other} template_style={item.template_style}>{loop(item.children)}</TreeNode>;
                }
                return <TreeNode key={item.key} title={item.title} plate_id={item.plate_id} url={item.url} is_other={item.is_other} template_style={item.template_style} />;
            })
        }


        return (
            <>
            {this.props.video.expandedKeys?(!!quanxian.length && (quanxian.includes('information/draggable') ?
                    <Tree
                        className="draggable-tree"
                        // expandedKeys={this.props.video.expandedKeys}
                        defaultExpandedKeys={this.props.video.expandedKeys}
                        selectedKeys={this.props.video.selectedKeys}
                        // defaultExpandParent={true}
                        autoExpandParent={true}
                        // selectedKeys={this.props.video.selectedKeys}
                        draggable={true}
                        showLine
                        onExpand={this.onExpand}
                        onDragEnter={this.onDragEnter}
                        onDrop={this.onDrop}
                        onSelect={this.changeTableName}
                    >
                        {/* <TreeNode key={'000000all'} title={'全部'} />; */}
                        <TreeNode key={'000000all'} title={'ᠪᠦᠭᠦᠳᠡ'} />;
                        {loop(treeList)}
                    </Tree>
                    :
                    <Tree
                        className="draggable-tree"
                        // expandedKeys={this.props.video.expandedKeys}
                        defaultExpandedKeys={this.props.video.expandedKeys}
                        selectedKeys={this.props.video.selectedKeys}
                        // defaultExpandParent={true}
                        autoExpandParent={true}
                        // selectedKeys={this.props.video.selectedKeys}
                        // draggable={quanxian.indexOf('information/draggable') > -1 ? true : false}
                        showLine
                        onExpand={this.onExpand}
                        onDragEnter={this.onDragEnter}
                        onDrop={this.onDrop}
                        onSelect={this.changeTableName}
                    >
                        {/* <TreeNode key={'000000all'} title={'全部'} />; */}
                        <TreeNode key={'000000all'} title={'ᠪᠦᠭᠦᠳᠡ'} />;
                        {loop(treeList)}
                    </Tree>)
                ):('')

            }

            </>


        );
    }
}


/**
 * 表单
 */
class BodyRow extends React.PureComponent {

    dragDirection = (
        dragIndex,
        hoverIndex,
        initialClientOffset,
        clientOffset,
        sourceClientOffset,
    ) => {
        const hoverMiddleY = (initialClientOffset.y - sourceClientOffset.y) / 2;
        const hoverClientY = clientOffset.y - sourceClientOffset.y;
        if (dragIndex < hoverIndex && hoverClientY > hoverMiddleY) {
            return 'downward';
        }
        if (dragIndex > hoverIndex && hoverClientY < hoverMiddleY) {
            return 'upward';
        }
    }



    render() {
        const {
            isOver,
            connectDragSource,
            connectDropTarget,
            moveRow,
            dragRow,
            clientOffset,
            sourceClientOffset,
            initialClientOffset,
            ...restProps
        } = this.props;
        const style = { ...restProps.style, cursor: 'move' };

        let className = restProps.className;
        if (isOver && initialClientOffset) {
            const direction = this.dragDirection(
                dragRow.index,
                restProps.index,
                initialClientOffset,
                clientOffset,
                sourceClientOffset
            );
            if (direction === 'downward') {
                className += ' drop-over-downward';
            }
            if (direction === 'upward') {
                className += ' drop-over-upward';
            }
        }

        return connectDragSource(
            connectDropTarget(
                <tr
                    {...restProps}
                    className={className}
                    style={style}
                />
            )
        );
    }
}

const rowSource = {
    beginDrag(props) {
        return {
            index: props.index,
        };
    },
};

const rowTarget = {
    drop(props, monitor) {
        const dragIndex = monitor.getItem().index;
        const hoverIndex = props.index;

        // Don't replace items with themselves
        if (dragIndex === hoverIndex) {
            return;
        }

        // Time to actually perform the action
        props.moveRow(dragIndex, hoverIndex);

        // Note: we're mutating the monitor item here!
        // Generally it's better to avoid mutations,
        // but it's good here for the sake of performance
        // to avoid expensive index searches.
        monitor.getItem().index = hoverIndex;
    },
};

const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    sourceClientOffset: monitor.getSourceClientOffset(),
}))(
    DragSource('row', rowSource, (connect, monitor) => ({
        connectDragSource: connect.dragSource(),
        dragRow: monitor.getItem(),
        clientOffset: monitor.getClientOffset(),
        initialClientOffset: monitor.getInitialClientOffset(),
    }))(BodyRow)
);

/**
 * table 表
 */
@connect(({ video }) => ({
    video,
}))
class DragSortingTable extends React.PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            visible2: false,
            visiblePlate: false,
            visibleSort: false,//取消置顶后排序modal
            bannerVisible: false,
            bannerRecord: {},
            banner: {},
            bannerPlate: '',
            copy: '',
            copyData: '',
            allData: '',
            styleList: [],
            dataForPlate: {},
            config_json: {},
            isAggregation: false,
            configModal: false,
            tableConfig2: JSON.parse(localStorage.getItem('tableConfig2')) || [
                'information_title',
                'default_scan_num',
                'status',
                'state',
                'plate_name',
                'style',
                'create_user',
                'create_time',
            ],
            updateStateTimeModal: false,
            state_time: moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
            information_id: '',
        }
    }
    components = {
        body: {
            row: DragableBodyRow,
        },
    }

    componentDidMount() {
        // console.log(window.location)
        const { search } = window.location
        const paramsString = search.substring(1)
        const searchParams = new URLSearchParams(paramsString)
        if (searchParams.get('type')) {
            const type = searchParams.get('type')
            // console.log(type)
            if (type === 'aggregation') {
                this.setState({
                    isAggregation: true
                })
            }
        }
        getModalList().then((res) => {
            if (res.data.code == 200) {
                this.setState({
                    styleList: res.data.data
                })
            }
        })

        getConfig().then((res) => {
            if (res.data && res.data.code == 200) {

                this.setState({
                    config_json: res.data.data.config_json
                })
                //写入资讯全局配置
                let cj = JSON.stringify(res.data.data.config_json);
                localStorage.setItem("config_json", cj);
            }
        })
    }

    /**
     * table 拖拽排序
     */
    moveRow = (dragIndex, hoverIndex) => {
        if (!this.props.video.initTableName) {
            return message.error('请勿在“全部”版面中拖拽！')
        }
        let dataSourceTable = this.props.video.dataSource.list
        if (dataSourceTable[dragIndex].top === dataSourceTable[hoverIndex].top) {

            const { dataSource } = this.props.video;
            const data = dataSource.list
            const dragRow = data[dragIndex];
            const newData = update(data, {
                $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],
            })
            let before_sort = '';
            let before_information_id = 0;
            let after_information_id = 0;
            dataSource.list = newData
            newData.map((item, index) => {
                if (item.information_id === dragRow.information_id) {
                    if (newData[index + 1]) {

                        before_sort = newData[index + 1].sort;
                        before_information_id = newData[index + 1].information_id;
                    } else {

                        before_sort = newData[index - 1].sort - 1;
                        after_information_id = newData[index - 1].information_id;
                    }
                }
            })

            let dataAugment = {
                plate_id: this.props.video.initTableName,
                information_sorts: [{
                    information_id: dragRow.information_id,
                    sort: dragRow.sort
                }],
                before_sort: before_sort,
                before_information_id: before_information_id,
                after_information_id: after_information_id,
            }
            let dataAug = {
                index: this.props.video.index,
                plate_id: this.props.video.initTableName,
                page_size: this.state.page_size
            }

            sortTable(dataAugment).then((res) => {
                if (res.data.code === 200) {
                    this.props.dispatch({ type: 'video/getTableList', payload: { dataAugment: dataAug } });
                }
            })

        } else {
            message.error('不能和置顶元素排序')
        }
    }
    /**
     *  审批 删除 上下架
     */
    onSelectChange = (selectedRowKeys, data) => {
        // console.log(selectedRowKeys, data);
        let ids = [];
        data.forEach((item) => {
            ids.push(item.information_id)
        })
        this.props.dispatch({
            type: 'video/setSelectedPlateIds',
            data: {
                ids: ids,
                list: data
            }
        })
        this.props.dispatch({ type: 'video/updateMoreDeal', data: selectedRowKeys });
    }
    /**
     * 单个 删除 资讯列表数据
     */
    delete = (record) => {
        var _that = this;
        confirm({
            title: '确认删除资讯吗',
            content: '删除的资讯标题：' + record.title,
            onOk() {
                let data = {
                    information_ids: [record.information_id],
                    plate_id: _that.props.video.initTableName,
                }
                // let datas = this.props.video.dataSource
                // datas.list.map((item, index) => {
                //   if (item.information_id === record.information_id) {
                //     datas.list.splice(index, 1)
                //   }
                // })
                // datas.total -= 1
                _that.props.dispatch({
                    type: 'video/deleteTableList', payload: {
                        dataAugment: data,
                        dataSource: _that.props.video.dataAugment
                    }
                });
            }
        })

    }
    /**
     * 上架  下架
     * record 返回当前 数据
     */
    upVideo = (record) => {

        let data = {
            information_ids: [record.information_id],
            state: record.state === 0 ? 1 : 0
        }
        setTimeout(() => {

        }, 3000)
        this.upDownVideoFetch(data)
    }
    //封装 上下架 请求
    upDownVideoFetch = (data) => {
        upDownVideo(data).then((res) => {
            if (res.data.code === 200) {
                let list = this.props.video.dataSource
                list.list.map((item, index) => {
                    data.information_ids.map((i, ins) => {
                        if (item.information_id === i) {
                            item.state = item.state === 0 ? 1 : 0;
                            item.state_time = moment().format('YYYY-MM-DD HH:mm:ss');
                        }
                    })
                })
                this.props.dispatch({ type: 'video/updateTableList', data: list });
            }
            message.success(res.data.msg);
        })
    }
    /**
     * 审核 状态处理 审核通过
     * 审核: 0:编辑状态 1:待审状态 2:终审通过 3:退回待编
     */
    //审核通过
    auditVideoFun = (record) => {
        let data = {
            information_ids: [record.information_id],
            status: 2,
        }
        this.auditVideoHandle(data, 2)
    }
    //审核拒绝
    auditVideoBack = (record) => {
        let data = {
            information_ids: [record.information_id],
            status: 3
        }
        this.auditVideoHandle(data, 3)
    }
    //提交审核
    submitAduit = (record) => {
        let data = {
            information_ids: [record.information_id],
            status: 1
        }
        this.auditVideoHandle(data, 1)
    }
    //审核处理请求封装
    auditVideoHandle = (data, num) => {
        auditVideo(data).then((res) => {
            if (res.data.code === 200) {
                let list = this.props.video.dataSource
                list.list.map((item, index) => {
                    data.information_ids.map((i, ins) => {
                        if (item.information_id === i) {
                            item.status = num
                        }
                    })
                })
                this.props.dispatch({ type: 'video/updateTableList', data: list });
                message.success(res.data.msg);
            } else {
                message.error(res.data.msg);
            }
        })
    }
    //修改版面 start 2019=09-04 戴文锋
    showPlateModal = (record) => {
        this.setState({
            visiblePlate: true,
            dataForPlate: record,
        });
    }
    handleCancelPlateModal = () => {
        this.setState({
            visiblePlate: false,
            dataForPlate: {},
        });
    }
    handleOkPlateModal = async () => {
        let data = { ...this.state.dataForPlate };
        data.is_update_status = 0; //不更新状态
        const result = await this.props.dispatch({ type: 'video/editInformationPlates', data: data });
        if (result) {
            const dataSource = produce(this.props.video.dataSource, draft => {
                const item = draft.list.find(x => x.id === data.id);
                if (item) {
                    item.plate_id = data.plate_id;
                    item.plate_name = data.plate_name;
                }
            })

            this.props.dispatch({ type: 'video/updateTableList', data: dataSource });
            this.setState({ visiblePlate: false, dataForPlate: {} });
        }
    }

    handlePlateChange = (value, label) => {

        this.setState({ dataForPlate: { ...this.state.dataForPlate, plate_id: value, plate_name: label } });
    }
    //修改版面 end

    //取消置顶后排序 start 2019-09-04 戴文锋
    showSortModal = () => {

        this.setState({
            visibleSort: true,
        });
    }
    handleCancelSortModal = () => {
        this.setState({
            visibleSort: false,

        });
    }
    handleOkSortModal = async () => {

    }

    //取消置顶后排序 end


    /**
     * 复制  table 一条数据
     */
    showModal2 = (record) => {

        this.setState({
            visible2: true,
            copyData: record
        });
    }
    showModal = (record) => {
        this.props.dispatch({
            type: 'video/getInformationInfo', data: {
                information_id: record.information_id
            }, callback: () => {
                this.setState({
                    visible: true,
                    allData: record
                });
            }
        });
        if (record.module_name === 'fcvideo') {
            this.props.dispatch({ type: 'video/getVideoInfo', data: { video_id: record.used_id } });
        }
        if (record.module_name === 'fcinformation_theme') {
            // this.props.dispatch({ type: 'video/getThemeinformation', data: {information_id:  record.used_id} });
        }

    }

    handleOk = (e) => {
        this.setState({
            visible: false,
        });
    }
    handleOk2 = (e) => {

        let data = this.state.copyData;
        let id = this.state.copy;
        data.plate_id = id;

        this.props.dispatch({ type: 'video/copy', data: data });
        this.setState({
            visible2: false,
        });

        let plate_id = this.state.copy;
        //跳到选中的版面
        this.props.dispatch({
            type: 'video/updatePutTableName', payload: {
                initTableName: plate_id,
                selectedKeys: ["" + plate_id + ""]
            }
        });
        localStorage.setItem('treeSelectedKeys', ["" + plate_id + ""]);
        localStorage.setItem('treeSelectedValue', plate_id);


        //更新当前页码
        this.props.dispatch({ type: 'video/updateIndex', data: 1 });
    }

    handleCancel = (e) => {
        this.setState({
            visible: false,
        });
    }
    handleCancel2 = (e) => {
        this.setState({
            visible2: false,
        });
    }

    edit = (data) => {
        let url;
        if (window.location.origin.indexOf('localhost') > -1) {
            url = window.location.origin + window.location.search + '#/Add/' + data.information_id + '/edit';
        } else {
            url = window.location.origin + '/application/fcinformation/web/' + window.location.search + '#/Add/' + data.information_id + '/edit';
        }
        window.open(url);

    }
    /**
  * 编辑蒙文
  */
    editm = (data) => {
        let url;
        if (window.location.origin.indexOf('localhost') > -1) {
            url = window.location.origin + window.location.search + '#/Addmongolian/' + data.information_id + '/editm';
        } else {
            url = window.location.origin + '/application/fcinformation/web/' + window.location.search + '#/Addmongolian/' + data.information_id + '/editm';
        }
        window.open(url);
    }

    /**
     * 置顶
     */
    upToTop = (record) => {
        this.props.dispatch({
            type: 'video/top', data: {
                plate_information_id: record.plate_information_id,
                sort: record.sort
            }
        });
    }
    /**
     * 取消置顶
     */
    downTop = async (record) => {
        const result = await this.props.dispatch({
            type: 'video/cancelTop', data: {
                plate_information_id: record.plate_information_id,
                sort: record.sort
            }
        });
        // if (result) {
        //     this.showSortModal();
        // }

    }
    /**
     * 资讯详情
     */
    backName = (data) => {
        //处理关联组件
        switch (data) {
            case 'fcvideo':
                return '视频'
                break;
            case 'fcinformation':
                return '资讯'
                break;
            case 'fcinformation_theme':
                return '专题'
                break;
            case 'fcfind':
                return '发现'
                break;
            default:
                break;
        }
    }

    //处理详情数据
    showMoreDital = (data) => {
        // console.log(data, 'showMoreDital');
        let urlConfig = UrlConfig;

        if (this.state.config_json && this.state.config_json.is_https == 1) {
            urlConfig = urlConfig.replace('http://', 'https://');
        }
        if (data) {
            let qrUrl = '';
            let qrUrl2 = '';
            let html = '';
            // console.log(data.type,'dashabi')
            switch (data.type) {

                case 0:
                    if (data.module_name === 'fcvideo' || data.module_name === 'fcvideo_theme') {
                        qrUrl = `${urlConfig}/application/fcvideo/share_h5/video.html?video_id=${this.props.video.videoInfo.video_id}`
                        html = (
                            <div>
                                <h3>{data.information_title}</h3>
                                {data.key_words && data.key_words !== '' && <h5>{data.key_words}</h5>}
                                {data.intro && data.intro !== '' && <h5>{data.intro}</h5>}
                                <video src={this.props.video.videoInfo ? this.props.video.videoInfo.video_src : ''}
                                    controls="controls" width="100%">
                                </video>
                            </div>
                        )
                        break;
                    }
                    if (data.module_name === 'fcinformation_theme') {
                        qrUrl = `${urlConfig}/application/fcinformation/mobile/#/List/${data.used_id}/undefined`;
                        qrUrl2 = `${urlConfig}/application/fcinformation/mobile/#/List/${data.used_id}/undefined?isZixunDetail=1`;
                        html = (
                            <div>
                                <iframe width="100%" height="600px" src={urlConfig + '/application/fcinformation/mobile/#/List/' + data.used_id + '/undefined?isZixunDetail=1'}></iframe>

                            </div>
                        )
                        break;
                    }
                    if (data.module_name === 'fslive') {
                        qrUrl = `${this.state.config_json && this.state.config_json.saas_domain || ''}/web/fslivemobile/index.html?id=${data.used_id}&domain=${UrlConfig}&access_key=${this.state.config_json && this.state.config_json.access_key || ''}`;
                        html = (
                            <div>
                                <iframe width="100%" height="600px" src={`${this.state.config_json && this.state.config_json.saas_domain || ''}/web/fslivemobile/index.html?id=${data.used_id}&domain=${UrlConfig}&access_key=${this.state.config_json && this.state.config_json.access_key || ''}`}></iframe>
                            </div>
                        )
                        break;
                    }
                    html = (
                        <div>
                            <h3>标题：{data.information_title}</h3>
                            <div className="showDitalDiv">
                                <img src={data.information_img} alt="..." width='100%' height='300px' />
                                {data.intro ? <p className="showDitalP" style={{ margin: 0 }}>{data.intro}</p> : ''}
                            </div>
                        </div>
                    )
                    break;
                case 1:
                    if (data.url) {
                        qrUrl = data.url;
                        html = (
                            <div>
                                <iframe width="100%" height="600px" src={data.url}  ></iframe>
                            </div>
                        )
                        break;
                    } else {
                        qrUrl = `${urlConfig}/application/fcinformation/mobile/#/ArticleDetail/${data.information_id}/undefined`;
                        qrUrl2 = `${urlConfig}/application/fcinformation/mobile/#/ArticleDetail/${data.information_id}/undefined?isZixunDetail=1&isPreviewDetail=1`;
                        html = (
                            <div>
                                <iframe width="100%" height="600px" src={urlConfig + '/application/fcinformation/mobile/#/ArticleDetail/' + data.information_id + '/undefined?isZixunDetail=1&isPreviewDetail=1'}></iframe>
                            </div>
                        )
                        break;
                    }
                case 2:
                    if (data.url) {
                        qrUrl = data.url;
                        html = (
                            <div>
                                <iframe width="100%" height="600px" src={data.url}></iframe>
                            </div>
                        )
                        break;
                    } else {
                        html = (
                            <div style={{ height: '600px', overflowY: 'auto' }}>
                                <h3>标题：{data.information_title}</h3>
                                <div className="showDitalDiv">
                                    {data.information_img ?
                                        <img src={data.information_img} alt="..." width='100%' height='300px' /> : ''}
                                    {/* {data.intro ? <p className="showDitalP" style={{ margin: 0 }}>{data.intro}</p> : ''} */}
                                </div>
                                {
                                    data.img_arr.map((item, index) => {
                                        return (
                                            <div className="showDitalDiv" key={index}>
                                                {item.img_path ?
                                                    <img src={item.img_path} alt="..." width='100%' height='300px' /> : ''}
                                                <div className="showDitalP">
                                                    <h3>{item.img_intro && item.img_intro.length > 40 ? item.img_intro.substring(0, 40) + '...' : item.img_intro}</h3>
                                                    {/* {item.img_intro ? <p>{item.img_intro}</p> : ''} */}
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                                {
                                    data.about_list.length == 0 ? '' :
                                        <div>
                                            <h3>更多推荐：</h3>
                                            <div className="showMoreDital">
                                                {
                                                    data.about_list.map((item) => {
                                                        return (
                                                            <div className="showDitalDiv">
                                                                <img src={item.information_img} alt="..." width='100%'
                                                                    height='250px' />
                                                                {item.information_title ?
                                                                    <p className="showDitalP">{item.information_title}</p> : ''}
                                                            </div>
                                                        )
                                                    })
                                                }
                                            </div>
                                        </div>
                                }
                            </div>
                        )
                        break;
                    }
                case 3:
                    html = (
                        <div>
                            <div className="showDitalDiv">
                                <img src={data.information_img} alt="..." width='100%' height='300px' />
                                <div className="showDitalP">
                                    <h3>{data.information_title}</h3>
                                    {data.intro ? <p>{data.intro}</p> : ''}
                                </div>
                            </div>
                            <p style={{ fontSize: '15px', padding: '5px 14px', border: '1px solid #bfbfbf', borderRadius: '7px' }}>
                                关联：{data.url ? data.url : (this.backName(data.banner_module_name) + data.banner_used_title)}</p>
                        </div>
                    )
                    break;
                default:
                    break;
            }

            let htmlQr = (
                <div>
                    {html}
                    <div>
                        <b>分享url地址：</b>{qrUrl}
                    </div>
                    <div>
                        <b>分享二维码：</b><br />{qrUrl ? <Qrcode value={qrUrl} size={120} /> : ''}
                    </div>
                    <div>
                        <b>预览url地址：</b>{qrUrl2}
                    </div>
                    <div>
                        <b>预览二维码：</b><br />{qrUrl2 ? <Qrcode value={qrUrl2} size={120} /> : ''}
                    </div>
                </div>
            )
            return htmlQr;
        }
    }

    //标题点击选中，双击编辑
    selectTitleClick = (text, data, index) => {
        count += 1;
        setTimeout(() => {
            if (count === 1) {
                // console.log('single click: ', count);
                const selectedRowKeys = this.props.video.selectedRowKeys;

                let sKey = [];
                sKey.push(index);
                let sData = [];
                sData.push(data);
                this.onSelectChange(sKey, sData)
            } else if (count === 2) {
                if (data.module_name) {
                    message.error('引用文档不能编辑');
                } else {
                    this.edit(data)
                }

                // console.log('setTimeout onDoubleClick: ', count);
            }
            count = 0;
        }, 200);

    }

    /**
     * 资讯转banner
     */
    handleBannerOk = () => {
        if (this.state.bannerPlate == '') {
            message.error('请选择版面!')
            return false;
        }
        let record = this.state.bannerRecord;
        let token = localStorage.getItem('token');
        let module = 'fcinformation';
        if (record.module_name !== '') {
            module = record.module_name;
        }
        let obj = {
            information_title: record.information_title,
            information_img: record.thumbnail,
            banner_used_title: record.information_title,
            banner_module_name: module,
            banner_used_id: record.information_id,
            banner_used_type: record.type,
            type: 3,
            plate_id: this.state.bannerPlate,
            token,
        }
        // console.log(record);
        addInformation(obj).then((res) => {
            if (res.data.code == 200) {
                message.success(res.data.msg);
            } else {
                message.error(res.data.msg);
            }
        })

        this.setState({
            bannerVisible: false
        })
    }

    /**
     * 显示资讯转banner弹出框
     */
    showBannerModal = (record) => {

        if (record.thumbnail == '') {
            message.error('当前稿件没有封面图!')
            return false;
        }


        this.setState({
            bannerVisible: true,
            bannerRecord: record
        })
    }
    handleChangePlate = (record) => {
        this.setState({
            visiblePlate: true,
            dataForPlate: record,
        });
    }

    onRef = (ref) => {
        this.child = ref
    }

    onChangeConfig = (e) => {
        localStorage.setItem('tableConfig2', JSON.stringify(e))
        this.setState({ tableConfig2: e })
    }

    updateStateTime = async () => {
        let { state_time, information_id } = this.state
        state_time = state_time.format('YYYY-MM-DD HH:mm:ss')
        const { data: { code, msg } } = await changeStateTime({ information_id, state_time })
        if (code === 200) {
            let list = this.props.video.dataSource
            list.list.some(item => item.information_id === information_id && (item.state_time = state_time))
            this.props.dispatch({ type: 'video/updateTableList', data: list });
            this.setState({ updateStateTimeModal: false })
            message.success(msg)
        } else {
            message.error(msg)
        }
    }



    render() {
        const { dataSource } = this.props.video
        const videoData = dataSource.list ? dataSource.list : []
        const total = dataSource.total ? dataSource.total : ''
        const selectedRowKeys = this.props.video.selectedRowKeys;
        const  permission = JSON.parse(localStorage.getItem('permissionzx')) || []
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const changeTag = (data) => {
            switch (data) {
                case 'fcvideo':
                    return '视频'
                    break;
                case 'fcfind':
                    return '发现';
                    break;
                case 'fcinformation':
                    return '资讯';
                    break;
                case 'fcinformation_theme':
                    return '专题';
                    break;
                case 'fcvideo_theme':
                    return '专辑';
                    break;
                case 'fslive':
                    return '直播';
                    break;
            }
        }
        const columns = [
            {
                className: 'h_table_td',
                width: 60,
                render: (text, record, index) => {
                    return (
                        <div className="h_table_div" key={index}>
                            {record.module_name ? <Tag color="blue" >引用</Tag> : ''}
                            {!!record.matrix_id ? <Tag color="green" >矩阵号</Tag> : ''}
                            {record.type ? <Tag color="green" >{record.type === 1 ? '文章' : record.type === 2 ? '图集' : 'banner'}</Tag> :
                                record.module_name ? <Tag color="green" >{changeTag(record.module_name)}</Tag> : ''}
                            {record.top === 1 ? <Tag color="red" >置顶</Tag> : ''}
                        </div>
                    )
                },
            },
            {
                className: 'mon_text',
                title: '标题',
                dataIndex: 'information_title',
                key: 'information_title',
                width: 180,
                render: (text, data, index) => {
                    if (this.state.config_json && this.state.config_json.is_mengwen) {
                        return (
                            <Tooltip title={<p className="videoMW_tooltip">{text}</p>} placement="right">
                                <a href="javascirpt:;" onClick={() => { this.selectTitleClick(text, data, index) }} dangerouslySetInnerHTML={{ __html: text }}></a>
                            </Tooltip>
                        )
                    } else {
                        return (
                            <a href="javascirpt:;" onClick={() => { this.selectTitleClick(text, data, index) }} dangerouslySetInnerHTML={{ __html: text }}></a>
                        )
                    }
                }
            },
            {
                title: '分类',
                dataIndex: 'class_name',
                key: 'class_name',
                width: 80,
            },
            {
                title: '点击/评论/点赞/转发',
                dataIndex: 'default_scan_num',
                key: 'default_scan_num',
                width: 170,
                render: (text, data) => {
                    return <div style={{ whiteSpace: "nowrap" }}>
                        <span style={{ width: "3em" }}>{data.default_scan_num + data.scan_coefficient * data.scan_num}</span>/
                    <span style={{ width: "3em" }}>{data.comment_num}</span>/
                    <span style={{ width: "3em" }}>{data.default_thumbs_up_num + data.thumbs_up_coefficient * data.thumbs_up_num}</span>/
                    <span style={{ width: "3em" }}>{data.default_forward_num + data.forward_num * data.forward_coefficient}</span>
                    </div>
                }
            },
            {
                title: '点击/评论/点赞/转发',
                dataIndex: 'scan_num',
                key: 'scan_num',
                width: 170,
                render: (text, data) => {
                    return <div style={{ whiteSpace: "nowrap" }}>
                        <span style={{ width: "3em" }}>{data.scan_num}</span>/
                    <span style={{ width: "3em" }}>{data.comment_num}</span>/
                    <span style={{ width: "3em" }}>{data.thumbs_up_num}</span>/
                    <span style={{ width: "3em" }}>{data.forward_num}</span>
                    </div>
                }
            },
            {
                title: '审核状态',
                key: 'status',
                dataIndex: 'status',
                width: 90,
                render: (status) => {
                    if (status === 0) {
                        return <span style={{ color: '#f44336' }}>草稿</span>
                    }
                    if (status === 1) {
                        return <span style={{ color: '#607d8b' }}>待审</span>
                    }
                    if (status === 2) {
                        return <span style={{ color: '#4caf50' }}>审核通过</span>
                    }
                    if (status === 3) {
                        return <span style={{ color: '#673ab7' }}>审核退回</span>
                    }

                }
            },
            {
                title: '上架情况',
                dataIndex: 'state',
                key: 'state',
                width: 90,
                render: (state) => {
                    if (state == 1) {
                        return <span style={{ color: '#4caf50' }}>已上架</span>
                    }
                    if (state == 0) {
                        return <span style={{ color: '#afafaf' }}>已下架</span>
                    }
                }
            },
            {
                className: 'mon_text',
                title: '发布版面',
                dataIndex: 'plate_name',
                key: 'plate_name',
                width: 90,
                render: (text, data) => {
                    if (text instanceof Array) {
                        return <div className="bule" onClick={this.handleChangePlate.bind(this, data)}>{text.map((item, idx) => <div key={item + idx}>{item}</div>)}</div>
                    } else {
                        return <span className="bule" onClick={this.handleChangePlate.bind(this, data)}>{text}</span>
                    }
                }
            },
            {
                title: '样式',
                dataIndex: 'style',
                key: 'style',
                width: 90,
                render: (text, data) => {
                    return <StyleDropdown styleList={this.state.styleList} text={text} data={data} />
                }
            },
            {
                title: '审核者',
                dataIndex: 'last_check_user',
                key: 'last_check_user',
                width: 80,
            },
            {
                title: '创建人',
                dataIndex: 'create_user',
                key: 'create_user',
                width: 80,
            },
            {
                title: '发布时间',
                dataIndex: 'state_time',
                key: 'state_time',
                width: 120,
                render: (text, record, index) => {
                    return (
                        <>
                            <span>{text}</span>
                            <Button onClick={() => {
                                this.setState({ state_time: moment(text, 'YYYY-MM-DD HH:mm:ss'), information_id: record.information_id },
                                    () => this.setState({ updateStateTimeModal: true }))
                            }} type="link">修改</Button>
                        </>
                    )
                }
            },
            {
                title: '创建时间',
                dataIndex: 'create_time',
                key: 'create_time',
                width: 120
            },
            {
            title: <><span>操作</span>{permission.indexOf('info_col')>-1&&<Icon onClick={() => this.setState({ configModal: true })} style={{ marginLeft: 10, color: '#1890ff', cursor: 'pointer' }} type="setting" />}</>,
                width: 280,
                render: (text, record, index) => {
                    const quanxian = this.props.video.quanxian;
                    const { loginModal } = this.props.video;
                    // console.log({ loginModal });
                    let userInfo = window.localStorage.getItem('userInfo')
                    let isAdmin = false;
                    let user = {}
                    if (userInfo != undefined) user = JSON.parse(userInfo)
                    if (user.user_name != undefined && user.user_name == 'admin') isAdmin = true
                    return (
                        <div>
                            <span className="bule" onClick={() => this.showModal(record)} style={{ marginRight: '15px' }}>预览</span>
                            <span>
                                {!record.matrix_id ? checkPrivilege('information/changestate', loginModal) ?
                                    record.state === 1 ?
                                        <span className="bule" style={{ marginRight: '15px' }} onClick={() => this.upVideo(record)}>下架</span>
                                        :
                                        <span className="bule" style={{ marginRight: '15px' }} onClick={() => this.upVideo(record)}>上架</span>
                                    : '' : ''
                                }
                                {/* {checkPrivilege('information/edit', loginModal) ?
                            record.module_name || record.state !== 0 || record.type == 3 ?
                                <span className="bule" style={{ marginRight: '15px', color: 'rgba(0, 0, 0, 0.25)' }} >编辑</span>
                                :
                                <span>
                                    <span className="bule" style={{ marginRight: '15px' }} onClick={() => this.edit(record)}>编辑</span>
                                    {this.state.config_json && this.state.config_json.is_mengwen ?
                                    <span className="bule" style={{ marginRight: '15px' }} onClick={() => this.editm(record)}>编辑蒙文</span>
                                        :''
                                    }
                                </span>
                            : ''} */}
                                {!record.matrix_id ? this.state.isAggregation ? '' : isAdmin && !record.module_name ?
                                    <span>
                                        <span className="bule" style={{ marginRight: '15px' }} onClick={() => this.edit(record)}>编辑</span>
                                        {this.state.config_json && this.state.config_json.is_mengwen ?
                                            <span className="bule" style={{ marginRight: '15px' }} onClick={() => this.editm(record)}>编辑蒙文</span>
                                            : ''
                                        }
                                    </span>
                                    : checkPrivilege('information/edit', loginModal) ?
                                        record.module_name || record.state !== 0 || record.type == 3 ?
                                            <span className="bule" style={{ marginRight: '15px', color: 'rgba(0, 0, 0, 0.25)' }} >编辑</span>
                                            :
                                            <span>
                                                <span className="bule" style={{ marginRight: '15px' }} onClick={() => this.edit(record)}>编辑</span>
                                                {this.state.config_json && this.state.config_json.is_mengwen ?
                                                    <span className="bule" style={{ marginRight: '15px' }} onClick={() => this.editm(record)}>编辑蒙文</span>
                                                    : ''
                                                }
                                            </span>
                                        : '' : ''}
                                        {!record.matrix_id && checkPrivilege('information/changestatus1', loginModal) && record.status === 0 &&
                                        <span className="bule" onClick={() => this.submitAduit(record)} style={{ marginRight: '15px' }}>提交审核</span>}

                                        {!record.matrix_id && checkPrivilege('information/changestatus2', loginModal) && record.status === 1 &&
                                        <span className="bule" onClick={() => this.auditVideoFun(record)} style={{ marginRight: '15px' }}>审核通过</span>}
                                        
                                <Dropdown overlay={(
                                    (
                                        <Menu>

                                            {/* {!record.matrix_id ? checkPrivilege('information/changestatus1', loginModal) ?
                                                <Menu.Item key="3" disabled={record.status === 0 ? false : true} onClick={() => this.submitAduit(record)}>
                                                    提交审核
                </Menu.Item>
                                                : '' : ''}

                                            {!record.matrix_id ? checkPrivilege('information/changestatus2', loginModal) ?
                                                <Menu.Item key="1" disabled={record.status === 1 ? false : true} onClick={() => this.auditVideoFun(record)}>
                                                    审核通过
                        </Menu.Item>
                                                : '' : ''} */}


                                            {this.state.isAggregation ? '' : checkPrivilege('information/copy', loginModal) ?
                                                <Menu.Item key="4" onClick={() => this.showModal2(record)}>
                                                    复制
                          </Menu.Item>
                                                : ''}


                                            {!record.matrix_id ? checkPrivilege('information/comment', loginModal) ?
                                                <Menu.Item key="5" disabled={record.state === 1 || record.state_time ? false : true} onClick={() => {

                                                    this.props.dispatch({
                                                        type: 'comment/showModal',
                                                        payload: {
                                                            information_id: record.information_id,
                                                        }
                                                    })
                                                }}>
                                                    评论
                            </Menu.Item>
                                                : '' : ''}
                                            {this.state.isAggregation ? '' : checkPrivilege('information/top', loginModal) ?
                                                <Menu.Item key="6" onClick={record.top === 0 ? () => this.upToTop(record) : () => { this.downTop(record) }}>
                                                    {record.top === 1 ? '取消置顶' : '置顶'}
                                                </Menu.Item>
                                                : ''}
                                            {this.state.isAggregation ? '' : checkPrivilege('information/deleteinformation', loginModal) ?
                                                <Menu.Item key="7" onClick={() => this.delete(record)} disabled={(record.matrix_id || record.state === 0) ? false : true}>
                                                    删除
                                        </Menu.Item>


                                                : ''}

                                            {!record.matrix_id ? checkPrivilege('information/changestatus3', loginModal) ?
                                                <Menu.Item key="2" disabled={(record.status === 1 || (record.status === 2 && record.state === 0)) ? false : true} onClick={() => this.auditVideoBack(record)}>
                                                    审核退回
                                        </Menu.Item>
                                                : '' : ''}

                                            {/* <Menu.Item key="8" onClick={() => this.showBannerModal(record)}>
                                        一键转banner
                                    </Menu.Item> */}
                                        </Menu>
                                    )
                                )}>
                                    <span className="ant-dropdown-link bule" >
                                        更多<Icon type="down" />
                                    </span>
                                </Dropdown>
                            </span>

                        </div>
                    )
                }
            },
        ];
        const columnsForSort = [
            {
                title: '序号',
                dataIndex: 'id',

                render: (text, data, index) => {
                    return index + 1;
                }
            },
            {
                title: '标题',
                dataIndex: 'information_title',
                key: 'information_title',

                render: (text, data, index) => {
                    return (
                        <a dangerouslySetInnerHTML={{ __html: text }}></a>
                    )
                }
            },

            {
                title: '创建时间',
                dataIndex: 'create_time',
                key: 'create_time',
                width: 120
            },
        ];
        const clomnsTitle = [
            { name: '标题', id: 'information_title' },
            { name: '分类', id: 'class_name' },
            { name: '点击/评论/点赞/转发', id: 'default_scan_num' },
            { name: '真-点击/评论/点赞/转发', id: 'scan_num' },
            { name: '审核状态', id: 'status' },
            { name: '上架情况', id: 'state' },
            { name: '发布版面', id: 'plate_name' },
            { name: '样式', id: 'style' },
            { name: '审核者', id: 'last_check_user' },
            { name: '创建人', id: 'create_user' },
            { name: '发布时间', id: 'state_time' },
            { name: '创建时间', id: 'create_time' },
        ]

        // 用户配置表格表头
        let quanxian = this.props.video.loginModal.privilege_list
        let selecteColums = columns.filter((item, index) => {
            return this.state.tableConfig2.some(i => i === item.key)
        })
        selecteColums.unshift(columns[0])
        selecteColums.push(columns[columns.length - 1])
        if (!quanxian?.includes('information/xuni')) {
            selecteColums = selecteColums.filter(item => (item.key !== 'scan_num'))
        }

        return (
            <div>
                {/* <VideoButton videoData={videoData} onRef={this.onRef} /> */}
                <div className="table-main">
                    <Table
                        className="table-antd mon_table"
                        columns={selecteColums}
                        // rowKey="id"
                        dataSource={videoData}
                        components={this.components}
                        rowSelection={rowSelection}
                        loading={this.props.video.loading}
                        onRow={(record, index) => ({
                            index,
                            moveRow: (dragIndex, hoverIndex) => this.moveRow(dragIndex, hoverIndex, record),
                            onDoubleClick: (event) => { this.showModal(record) },
                        })}
                        style={{ marginTop: '10px' }}
                        pagination={{
                            total: total, //数据总数量
                            size: 'small',
                            showQuickJumper: true,
                            current: this.props.video.dataAugment.index ? this.props.video.dataAugment.index : 1,
                            pageSize: this.state.page_size,  //显示几条一页
                            defaultPageSize: 10, //默认显示几条一页
                            showSizeChanger: true,  //是否显示可以设置几条一页的选项
                            onShowSizeChange: (current, size) => {
                                this.setState({
                                    page_size: size
                                })
                                // if(size >= videoData.total){
                                //     index = 1;
                                // }
                                let data = {
                                    index: current,
                                    plate_id: this.props.video.initTableName,
                                    page_size: size
                                }
                                let dataAugment = this.props.video.dataAugment
                                this.props.dispatch({
                                    type: 'video/getTableList', payload: { dataAugment: Object.assign({}, dataAugment, data) }
                                })
                            },
                            pageSizeOptions: ['10', '25', '50', '75', '100'],
                            style: { marginRight: '50px' },
                            showTotal: (total) => {  //设置显示一共几条数据
                                return `共有${total}数据`
                            },
                            onChange: (page) => {
                                let data = {
                                    index: page,
                                    plate_id: this.props.video.initTableName,
                                    page_size: this.state.page_size
                                }
                                let dataAugment = this.props.video.dataAugment
                                //清除已选中的列
                                if (this.state.isAggregation) {
                                    let aggregationStatus = localStorage.getItem('aggregationStatus')
                                    data.status = aggregationStatus
                                }
                                this.props.dispatch({ type: 'video/updateMoreDeal', data: [] });


                                this.props.dispatch({ type: 'video/updateIndex', data: page })
                                this.props.dispatch({
                                    type: 'video/getTableList', payload: { dataAugment: Object.assign({}, dataAugment, data) }
                                })
                            }
                        }}
                    />
                </div>
                {this.state.visible ? <Modal
                    title="预览"
                    visible={this.state.visible}
                    footer={null}
                    onCancel={this.handleCancel}
                    width='450px'
                >
                    {this.showMoreDital(this.props.video.informationInfo)}
                </Modal> : ''}

                <Modal
                    width='60%'
                    title="选择取消置顶后的位置"
                    visible={this.state.visibleSort}
                    onCancel={this.handleCancelSortModal}
                    onOk={this.handleOkSortModal}
                >
                    <Table
                        className="table-antd"
                        columns={columnsForSort}
                        rowKey="id"
                        dataSource={videoData}
                        loading={this.props.video.loading}
                        pagination={{
                            total: total, //数据总数量
                            size: 'small',
                            showQuickJumper: true,
                            current: this.props.video.dataAugment.index ? this.props.video.dataAugment.index : 1,
                            defaultPageSize: 7, //默认显示几条一页
                            showSizeChanger: true,  //是否显示可以设置几条一页的选项
                            onShowSizeChange: (current, size) => {
                                this.setState({
                                    page_size: size
                                })
                                // if(size >= videoData.total){
                                //     index = 1;
                                // }
                                let data = {
                                    index: current,
                                    plate_id: this.props.video.initTableName,
                                    page_size: size
                                }
                                let dataAugment = this.props.video.dataAugment
                                this.props.dispatch({
                                    type: 'video/getTableList', payload: { dataAugment: Object.assign({}, dataAugment, data) }
                                })
                            },
                            pageSizeOptions: ['7', '25', '50', '75', '100'],
                            style: { marginRight: '50px' },
                            showTotal: (total) => {  //设置显示一共几条数据
                                return `共有${total}数据`
                            },
                            onChange: (page) => {
                                let data = {
                                    index: page,
                                    plate_id: this.props.video.initTableName,
                                    page_size: this.state.page_size
                                }
                                let dataAugment = this.props.video.dataAugment
                                //清除已选中的列

                                this.props.dispatch({ type: 'video/updateMoreDeal', data: [] });


                                this.props.dispatch({ type: 'video/updateIndex', data: page })
                                this.props.dispatch({
                                    type: 'video/getTableList', payload: { dataAugment: Object.assign({}, dataAugment, data) }
                                })
                            }
                        }}
                    />
                </Modal>
                <Modal
                    title="发布版面"
                    visible={this.state.visiblePlate}
                    onCancel={this.handleCancelPlateModal}
                    onOk={this.handleOkPlateModal}
                >
                    <div>版　面：
                    <TreeSelect
                            value={this.state.dataForPlate.plate_id}
                            style={{ width: 300 }}
                            dropdownStyle={{ maxHeight: 400 }}
                            dropdownMatchSelectWidth
                            placeholder="请选择资讯版面"
                            treeData={this.props.video.treeList}
                            multiple
                            treeDefaultExpandAll
                            onChange={this.handlePlateChange}
                            multiple
                        />

                    </div>
                </Modal>
                <Modal
                    title="复制"
                    visible={this.state.visible2}
                    onCancel={this.handleCancel2}
                    onOk={this.handleOk2}
                    width='648px'
                >
                    <div style={{ height: '70px', textAlign: 'center' }}>
                        复制到：<TreeSelect
                            style={{ width: 300 }}
                            dropdownStyle={{ maxHeight: 400 }}
                            dropdownMatchSelectWidth
                            treeData={this.props.video.treeList}
                            placeholder="请选择版面"
                            treeDefaultExpandAll
                            onChange={(value) => this.setState({ copy: value })}
                        />
                    </div>
                </Modal>
                <Modal
                    title="一键转banner"
                    visible={this.state.bannerVisible}
                    onCancel={() => {
                        this.setState({
                            bannerVisible: false
                        })
                    }}
                    onOk={this.handleBannerOk}
                    width='648px'
                >
                    <div>版　面：
                    <TreeSelect
                            style={{ width: 300 }}
                            dropdownStyle={{ maxHeight: 400 }}
                            dropdownMatchSelectWidth
                            treeData={this.props.video.treeList}
                            placeholder="请选择版面"
                            treeDefaultExpandAll
                            // defaultValue={this.props.video.initTableName}
                            // value={this.state.bannerPlate}
                            onChange={(value) => this.setState({ bannerPlate: value })}
                        />
                    </div>
                    {/* <div>
                        标　题：
                        <Input style={{ width: 500,marginTop:'20px' }} value={this.state.bannerTitle} onChange={(value) => { this.setState({ bannerTitle: value }) }} />
                    </div>
                    <div>
                        封面图：
                        <img height="160" width="280" style={{marginTop:'20px'}} src={this.state.bannerSrc} />
                    </div> */}
                </Modal>
                <CommentModal />
                {/* 表格配置模态框 */}
                <Modal
                    title="配置显示内容"
                    visible={this.state.configModal}
                    onCancel={() => this.setState({ configModal: false })}
                    width='300px'
                    footer={null}
                    destroyOnClose
                >
                    <Checkbox.Group style={{ width: '100%' }} value={this.state.tableConfig2} onChange={this.onChangeConfig}>
                        {clomnsTitle.map((i, idx) => (
                            <Row key={idx}>
                                <Col>
                                    {i.id === 'scan_num' ?
                                        quanxian?.includes('information/xuni') && <Checkbox value={i.id}>{i.name}</Checkbox>
                                        :
                                        <Checkbox value={i.id}>{i.name}</Checkbox>
                                    }
                                </Col>
                            </Row>
                        ))}

                    </Checkbox.Group>
                </Modal>
                {/* 修改发布时间模态框 */}
                <Modal
                    title="修改发布时间"
                    visible={this.state.updateStateTimeModal}
                    onCancel={() => this.setState({ updateStateTimeModal: false })}
                    onOk={this.updateStateTime}
                    width='300px'
                    destroyOnClose
                >
                    <DatePicker
                        showTime
                        placeholder="请选择发布时间"
                        onChange={(e) => { this.setState({ state_time: e }) }}
                        onOk={() => { }}
                        value={this.state.state_time}
                    />
                </Modal>
            </div>
        );
    }
}


const TableList = DragDropContext(HTML5Backend)(DragSortingTable)



